<template>
    <f7-page>
        <f7-navbar title="发布司机运输" back-link="返回"></f7-navbar>

        <f7-card class="card_nav">
            <f7-card-header>
                <div class="text-left">
                    <h4>{{passInfo.demand_company_name}} <img src='../../assets/img/label-v.png' class="label-v"></h4>
                    <h5 class="ng-binding">{{passInfo.company_province}} - {{passInfo.company_city}}</h5>
                </div>
                <div class="text-right">
                    <img src='../../assets/img/infor-face.png' class="infor-face">
                    <span>{{passInfo.demand_user_name}}</span>
                </div>
            </f7-card-header>
            <f7-card-header>
                <div class="card-left">
                    <img src='../../assets/img/pass-icon.png' class="line-icon">
                    <div class="pull-left">
                        <b>{{passInfo.send_city}}</b>
                        <span>{{passInfo.send_district}}</span>
                        <span>{{passInfo.time_creation|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
                <div class="card-center">
                    <i>{{passInfo.amount}}吨 {{passInfo.category_chn}}</i>
                    <h5 class="status-bg text-orange " v-if="passInfo.product_categories">￥{{passInfo.product_categories[0].pass_price}}元/吨</h5>
                </div>
                <div class="card-right">
                    <div class="pull-right">
                        <b>{{passInfo.receive_city}}</b>
                        <span>{{passInfo.receive_district}}</span>
                        <span>{{passInfo.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
            </f7-card-header>
        </f7-card>

        <f7-block v-for="(item) in passInfo.product_categories">
            <f7-col>
                <div>
                    <div v-for="(item1) in item.product_name" class="row-wrap">
                        <p class="classification">
                            <img src='../../assets/img/label-goodsicon.png' class="label-icon-trade"> {{passInfo.category_chn}}
                        </p>

                        <div class="item-add">
                            <h5>{{item1.name}}</h5>
                            <!--<i>3.5吨/件</i>-->
                            <span v-for="(item2) in item1.attribute">
                                {{item2.name}}：{{item2.value}}{{item2.unit}}
                            </span>
                        </div>
                        <div class="item-fot">
                            <span>
                                运费:￥{{item.pass_price}}元/吨
                            </span>
                        </div>
                        <div class="item-fot">
                            <span class="ng-binding">已运输{{passInfo.tip_price?passInfo.tip_price:0}}件</span>
                        </div>
                    </div>
                </div>
            </f7-col>

            <f7-block-title>

            </f7-block-title>
        </f7-block>

        <div class="bg-white">
            <div class="list-inset">
                <h4 class="bold">
                    货物描述
                </h4>
                <h4 class="text-gray">
                    {{passInfo.appendix?passInfo.appendix:'无特殊说明'}}
                </h4>
            </div>
        </div>




        <f7-list>
            <div class="item-address">
                <img src="../../assets/img/landmark.png" class="landmark">
                <h2 class="text-black">提货地址</h2>
                <h5 class="text-gray1">
                    个人地址：{{passInfo.send_city}}{{passInfo.send_district}}{{passInfo.send_addr}}</h5>
                <h5 class="text-gray1">联系人：{{passInfo.send_name}} &nbsp;&nbsp;&nbsp;&nbsp;手机号：{{passInfo.send_phone}}
                </h5>
                <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
            <div class="item-address">
                <img src="../../assets/img/landmark-1.png" class="landmark">
                <h2 class="text-black">收货地址</h2>
                <h5 class="text-gray1">
                    个人地址：{{passInfo.receive_city}}{{passInfo.receive_district}}{{passInfo.receive_addr}}</h5>
                <h5 class="text-gray1">联系人：{{passInfo.receive_name}} &nbsp;&nbsp;&nbsp;&nbsp;手机号：{{passInfo.receive_phone}}</h5>
                <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
        </f7-list>


        <f7-list form v-if="passInfo">
            <f7-list-item>
                <div class="item-title">运输吨数</div>
                <div class="item-input">
                    <input type="text" placeholder="请输入" readonly class="Please_enter" :value="passInfo.amount_remain">
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="item-title">运费(元/吨)</div>
                <div class="item-input">
                    <input type="text" placeholder="请输入" class="Please_enter" v-model="passInfo.product_categories[0].pass_price">
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="item-title">信息费(元/车)</div>
                <div class="item-input">
                    <input type="text" placeholder="请输入"  class="Please_enter" v-model="passInfo.product_categories[0].tip_price">
                </div>
            </f7-list-item>
        </f7-list>

        <div class="z_item">
            <div>
                <ul>
                    <li>
                        司机接单截止时间
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <!--<span class="z_item_rt" >2018.07.31 16:05</span>-->
                        <myDatepicker @dtpkChange="driverDeadline"></myDatepicker>
                    </li>
                </ul>
            </div>



            <div>
                <ul>
                    <li>
                        选择提货时间
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <select class="sele" v-model="formData.date_type">
                            <option  v-for="item in option1"  :value="item.val">{{item.name}}</option>
                        </select>
                    </li>
                    <template v-if="formData.date_type=='start'">
                        <li>
                            自确认计划几日后提货
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.start_type">
                        </li>
                        <li>
                            <small>填写0时，物流可进行派车 </small>
                        </li>
                    </template>
                    <template v-else>
                        <li>
                            选择日期
                            <f7-icon f7="right" class="arrow-gray"></f7-icon>
                            <select class="sele" v-model="formData.cut_type">
                                <option  v-for="item in option2"  :value="item.val">{{item.name}}</option>
                            </select>
                        </li>
                        <li>
                            具体时间
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.cut_date">
                        </li>
                        <li>
                            未按时提货扣款
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.timeout_price">
                        </li>
                        <li>
                            提货完成百分比不计扣款
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.not_count_price">
                        </li>
                    </template>

                </ul>
            </div>

            <div>
                <ul>
                    <li>
                        司机交货截止时间
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <myDatepicker @dtpkChange="timeArrival"></myDatepicker>
                        <!--<span class="z_item_rt" >选填</span>-->
                    </li>
                </ul>
            </div>


            <div>
                <ul>
                    <li @click="setPaymentMethod">
                        运费付款方式
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <span class="z_item_rt" >{{selPaymentMethodVal.val}} </span>
                    </li>
                    <li @click="setPaymentType"> 运费付款类型
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <span class="z_item_rt" >{{selPaymentTypeVal.val}}</span>
                    </li>
                </ul>
            </div>


            <div>
                <ul>
                    <li @click="setPaymentObj">
                        运费付款方
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <span class="z_item_rt" >{{selPaymentObjVal.val}}</span>
                    </li>
                </ul>
            </div>

        </div>



        <div class="gap-20">
            <h4 class="gap-row list-inset">按以下过磅凭证结算运费</h4>
            <div class="bg-white">
                <div class="reg-radio reg-radio1 row">
                    <div class="col col-50">
                        <label class="checkbox Check_box">
                            <input  type="radio"  value="get" name="freight_voucher" v-model="formData.freight_voucher.style">
                            <i class="icon-checkbox"></i>
                        </label>
                        发货方
                    </div>
                    <div class="col col-50">
                        <label class="checkbox Check_box">
                            <input  type="radio" value="fact" name="freight_voucher" v-model="formData.freight_voucher.style">
                            <i class="icon-checkbox"></i>
                        </label>
                        收货方
                    </div>

                </div>

                <ul class="weigh-list" v-if="formData.freight_voucher.style=='get'">
                    <li class="ng-binding" :class="{'active':item.checked}" v-for="item,index in formData.freight_voucher.get" @click="freightVoucherClick(formData.freight_voucher.style,index)">
                        {{item.text}}
                    </li>
                    <div class="clearfix"></div>
                </ul>
                <ul class="weigh-list" v-else>
                    <li class="ng-binding" :class="{'active':item.checked}" v-for="item,index in formData.freight_voucher.fact" @click="freightVoucherClick(formData.freight_voucher.style,index)">
                        {{item.text}}
                    </li>
                    <div class="clearfix"></div>
                </ul>
            </div>
        </div>


        <div class="gap-20">
            <h4 class="gap-row list-inset">运输途耗标准</h4>
            <f7-list form class="ul_list">
                <f7-list-item>
                    <div class="item-title">合理路耗(%)</div>
                    <div class="item-input">
                        <input type="text" placeholder="请输入" class="Please_enter" v-model="formData.att_traffic.one[1]">
                    </div>
                </f7-list-item>
                <f7-list-item>
                    <div class="item-title">扣款标准(元/吨)</div>
                    <div class="item-input">
                        <input type="text" placeholder="请输入"  class="Please_enter" v-model="formData.att_traffic.one[2]">
                    </div>
                </f7-list-item>
            </f7-list>

        </div>

        <div class="bg-white gap-20 Under_gap">
            <div class="list-item">
                <label class="item">
                    <textarea class="list-input text-gray1"   placeholder="请补充描述" v-model="formData.appendix"></textarea>
                </label>
            </div>
        </div>




        <f7-toolbar>
            <div class="button-foot" @click="save()">
                <div class="col">
                    <f7-link style="color: white">选择车辆</f7-link>
                </div>
            </div>
        </f7-toolbar>
        <actionSheet :data="selPaymentMethodDate" ref="paymentMethodAction" @actionEmit="paymentMethodActionDone"></actionSheet>
        <actionSheet :data="selPaymentTypeDate" ref="paymentTypeAction" @actionEmit="paymentTypeActionDone"></actionSheet>
        <actionSheet :data="selPaymentObjDate" ref="paymentObjAction" @actionEmit="paymentObjActionDone"></actionSheet>
    </f7-page>
</template>

<script>
    import actionSheet from '../../components/actionSheet'
    import maps from '../../utils/maps'
    import myDatepicker from '../../components/datetimepicker'
    import setProductType  from '../../components/setProductType.vue'
    import setProductCategory  from '../../components/setProductCategory.vue'
    import F7Page from "framework7-vue/src/components/page"
    import common from '../../utils/common.js'
    export default {
        name: "passDtl",
        components: {F7Page,setProductType,
            setProductCategory,myDatepicker,actionSheet},
        data(){
            return{
                formData:{
                    appendix:'',//备注
                    att_traffic:{
                        one: [1, '15', 0]
                    },//合理路耗
                    freight_voucher:{
                        style:'fact',
                        get:[{ text: "过磅单", checked: true }, { text: "派车单", checked: false }],
                        fact:[{ text: "过磅单", checked: true }, { text: "派车单", checked: false }]
                    },//按一下过磅凭证

                    //运费付款类型、方式、对象
                    payment_payer:"",
                    payment_choice:"",
                    payment_method :"all_goods",
                    time_arrival:'',//司机交货截止时间
                    date_type:"start", // 选择提货时间
                    start_type:10,//选择提货时间-提货开始时间
                    //选择提货时间-提货截止时间
                    cut_type:"today",
                    cut_date:24,
                    timeout_price:'',
                    not_count_price:'',
                    time_validity:'',//司机接单截止时间
                    tip_price:'',//信息费
                    price:'',//运费
                    //提货地址与收获地址
                    receive_id:"",
                    send_id:"",

                    //这些是不需要用户填写的
                    company_name: this.Storage.get('company').company.nick_name,//本号公司名称


                    platform_driver:[],//平台推荐

                    user_ids:[],//指派司机的id号

                    //写死
                    price_type:"fix",
                    scene:"traffic_assign",


                    //双方物流、三方物流(orderid)、根据线路下单
                    // scene:"both",
                    line:'',

                    //产品
                    product_categories:[]




                },



                passInfo:'',
                productType:[],
                productCate:{},
                productTypeSd:{},
                productCateParam:{},
                addsType:'',
                addsStr:{
                    th:{
                        str:'',
                        src:{}
                    },
                    sh:{
                        str:'',
                        src:{}
                    }
                },
                option1:[
                    {name:'提货起始时间',val:'start'},
                    {name:'提货截止时间',val:'cut'}
                ],
                option2:[
                    {name:'今天',val:'today'},
                    {name:'明天',val:'morrow'}
                ],
                selPaymentMethodDate:maps.selPaymentMethod,
                selPaymentTypeDate:maps.selPaymentType,
                selPaymentObjDate:maps.selPaymentObj,
                selPaymentMethodVal:{},
                selPaymentTypeVal:{},
                selPaymentObjVal:{},
            }
        },
        methods:{
            async passDtls () {
                let param = {order_id: this.$f7Route.params.tradeid}
                this.passInfo = (await this.LineService.orderDetails(param)).data.data
                this.formData.order_id=this.$f7Route.params.tradeid
            },

            goAdds(type){
                this.addsType=type;
                this.$f7.router.navigate('/mine/address/:source?')
            },
            driverDeadline(data){
                this.formData.time_validity=data
            },
            setPaymentMethod(){
                this.$refs.paymentMethodAction.openAction()
            },
            setPaymentType(){
                this.$refs.paymentTypeAction.openAction()
            },
            setPaymentObj(){
                this.$refs.paymentObjAction.openAction()
            },
            paymentMethodActionDone(data){
                this.selPaymentMethodVal=data
            },
            paymentTypeActionDone(data){
                this.selPaymentTypeVal=data
            },
            paymentObjActionDone(data){
                this.selPaymentObjVal=data
            },
            //运费付款方式相关数据初始化
            initSelPaymentMethodDate(){
                common.addAttrSwitch(this.selPaymentMethodDate)
                this.selPaymentMethodDate[0].switch=true;
                this.selPaymentMethodDate.forEach( (item)=> {
                    if(item.switch){
                        this.selPaymentMethodVal=item
                    }
                })
            },
            //运费付款类型相关数据初始化
            initSelPaymentTypeDate(){
                common.addAttrSwitch(this.selPaymentTypeDate)
                this.selPaymentTypeDate[0].switch=true;
                this.selPaymentTypeDate.forEach( (item)=> {
                    if(item.switch){
                        this.selPaymentTypeVal=item
                    }
                })
            },
            //运费付款人相关数据初始化
            initSelPaymentObjDate(){
                common.addAttrSwitch(this.selPaymentObjDate)
                this.selPaymentObjDate[0].switch=true;
                this.selPaymentObjDate.forEach( (item)=> {
                    if(item.switch){
                        this.selPaymentObjVal=item;
                    }
                })
            },
            freightVoucherClick(type,index){
                this.formData.freight_voucher[type][index].checked=!this.formData.freight_voucher[type][index].checked
                this.$set(this.formData.freight_voucher[type],index,this.formData.freight_voucher[type][index])
            },
            timeArrival(data){
                this.formData.time_arrival=data;
            },
            async save(){
                //有一部分数据承接自物流订单，一部分是自己填写的
                this.formData.product_categories=this.passInfo.product_categories
                this.formData.send_id=this.passInfo.send_address_id;
                this.formData.receive_id=this.passInfo.receive_address_id;
                this.formData.price=this.passInfo.product_categories[0].pass_price;

                let addsInfo={
                    receive_province:this.passInfo.receive_province,
                    receive_city:this.passInfo.receive_city,
                    receive_district:this.passInfo.receive_district,
                    send_province:this.passInfo.send_province,
                    send_city:this.passInfo.send_city,
                    send_district:this.passInfo.send_district
                }
                let assignDriverStorage={
                    formData:this.formData,
                    addsInfo:addsInfo
                }
                this.Storage.set('assignDriver',assignDriverStorage)
                this.$f7.router.navigate({url: '/mine/selectDriver/'})



                // let addBothRes=await this.LineService.addSend(this.formData);
                //
                // if(addBothRes.data.status=='success'){
                //     this.toast('指派成功')
                //     setTimeout( () =>{
                //         this.$f7.router.back()
                //     },2000)
                // }else{
                //     this.toast(addBothRes.data.msg)
                // }

            }
        },
        created(){
            this.initSelPaymentMethodDate()
            this.initSelPaymentTypeDate()
            this.initSelPaymentObjDate()
            this.passDtls()
        },
        watch: {
            'selPaymentObjVal'(that){
                this.formData.payment_payer=that.key;
            },
            'selPaymentTypeVal'(that){
                this.formData.payment_choice=that.key;
            },
            'selPaymentMethodVal'(that){
                this.formData.payment_method=that.key;
            }

        }
    }
</script>

<style scoped>
    .item-add {
        background: #f8fff0;
        padding: 4px 10px;
        margin: 10px 0px;
        border-left: 1px solid green;
    }

    .item-add h6 {
        width: 100%;
        color: rgb(51, 140, 37);
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
        display: inline-block;
    }
    .item-add span{
        display: inline-block;
        margin:5px 15px 5px 0px;
        font-size: 12px;
        color: rgb(51, 140, 37);
    }
    .item-fot{
        margin-top: 5px;
    }
    .item-fot {
        font-size: 12px;
        color: #666;
    }
    .item-fot span i {
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-style: normal;
        font-weight: initial;
    }
    .Add_subtract{
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
    }

    .Add_subtract .number_err {
        width: 60px  !important;
        background: #f4f4f4;
        height: 27px;
        line-height: 28px;
        border-radius: 2px;
        margin: 0 5px;
        text-align: center;
        display: inline-block;
    }
    .Add_subtract .num{
        background: #f4f4f4 !important;
        font-size: 14px;
        margin: 0px 5px;
        color: #333;
        height: 25px;
        line-height: 24px;
        width: 25px;
        border-radius: 0px !important;
    }
    .Under_gap{
        margin-bottom: 30px;
    }


    /* 0801底部 */
    .gap-row {
        padding: 10px 0;
    }
    .list-inset {
        margin: 0 15px;
    }
    .reg-radio1 {
        padding: 15px;
    }
    .reg-radio .col.col-50 {
        padding: 3px 0;
    }
    .Check_box {
        width: 20px;
        height: 20px;
        border: 0;
        background: transparent;
        cursor: pointer;
        -webkit-appearance: none;
        top: -2px;
        margin: 0 10px 0 0;
    }
    .weigh-list {
        padding: 0px;
        margin: 5px 0 0 15px;
    }
    .weigh-list li {
        border: 1px solid #F5F5F5;
        border-radius: 3px;
        margin: 0 10px 20px 0;
        padding: 3px;
        color: #333;
        min-width: 23.5%;
        max-width: 23.5%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        text-align: center;
        float: left;
    }
    .weigh-list li.active {
        border-color: #6E6EE9;
        color: #6E6EE9;
        background: rgba(143,143,235,.1);
    }
    .clearfix {
        clear: both;
    }
    .ul_list{
        margin: 0px !important;
    }
    .list-input{
        width: 100%;
        min-height: 44px;
    }














    .card_nav {
        padding: 10px 0px;
        border-radius: 0px !important;
        margin: 0px !important;
        box-shadow:none !important;
    }
    .ios .card-header {
        padding: 4px 15px;
        min-height: 55px;
        position: static;
    }

    .text-right {
        text-align: center;
    }

    .infor-log {
        max-width: 24px;
        max-height: 24px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .infor-face {
        max-width: 38px;
        max-height: 38px;
        width: 100%;
        height: 100%;
    }
    .text-center_article {
        position: absolute;
        font-size: 14px;
        color: #A2A2F0;
        padding-left: 50px;
        top:15px;
    }
    .text-center_weight{
        font-size: 12px;
        position: absolute;
        padding-left: 50px;
        color: #999;
        top:37px;
    }
    .text-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #999;
        display: inherit;
    }



    .line-icon {
        position: absolute;
        left: 16px;
        width: 16px;
        height: 45px;
        top:75px;
    }
    .label-icon-no{
        width: 32px;
        height: 16px;
        vertical-align: text-bottom;
        margin-right: 7px;
    }
    .pull-left {
        text-align: left;
        margin-left: 24px;
    }

    .pull-left b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-left span {
        font-size: 12px;
        color: #666;
        display: block;
        width: 60px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .text-orange {
        color: #ff6c00;
        font-weight: normal !important;
        font-size: 13px;
        text-align: center;
    }

    .status-bg {
        background: url('../../assets/img/route-bg.png') no-repeat top center;
        background-size: 95px 4px;
        margin-top: 6px;
        padding-top: 10px;
        width: 97px;
    }

    .card-right {
        text-align: center;
    }

    .pull-right {
        text-align: right;
    }

    .pull-right b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #999;
        display: inherit;
        width: 60px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .list-item {
        font-size: 14px;
        border: none;
        padding: 13px 15px;
    }
    .gap-20{
        margin-top: 20px;
    }
    .text-purple {
        color: #A2A2F0;
    }
    .bold {
        font-weight: bold;
    }
    .text-gray1 {
        color: #666;
    }
    .bg-white{
        background: #fff;
    }
    .ios .list {
        margin: 20px 0px 0px 0px;
        background: #fff;
    }
    .item-address {
        position: relative;
        border: none;
        padding: 10px 0 8px 50px;
        min-height: 0;
        border-bottom: 1px solid #f5f5f5;
    }
    .item-address h2 {
        font-size: 14px;
        margin: 0;
    }
    .item-address h5 {
        font-size: 12px;
        margin: 0;
    }
    .landmark {
        position: absolute;
        border-radius: 0;
        width: 21px;
        height: 30px;
        left: 15px;
        top: 12px;
    }
    .color-gray {
        position: absolute;
        top: 30px;
        color: #8e8e93;
        font-size: 20px;
        right: 10px;
    }
    .gray_category {
        position: absolute;
        top: 12px;
        color: #8e8e93;
        font-size: 20px;
        right: 10px;
    }
    .ios .list {
        margin: 20px 0;
        font-size: 17px;
    }
    .Please_enter {
        height: 44px;
        color: #333;
        font-size: 12px !important;
        text-align: right;
    }
    /* 列表 */
    .z_item ul{
        padding-left:0;
        font:inherit;
        font-size: 100%;
        font-family: "微软雅黑";
        color: #444;
    }
    .z_item li{
        background: white;
        padding-left: 10px;
        border-bottom: 1px solid #f5f5f5;
        line-height: 40px;
        color: #333;
    }
    .z_item .z_item_rt{
        float: right;
        margin-right: 10px;
        color: #999;
        text-align: right;
        font-weight: normal;
    }
    .arrow-gray {
        float: right;
        color: #8e8e93;
        font-size: 20px;
        margin-right:10px;
        margin-top: 10px;
    }
    .Please_thetxt{
        height: 41px;
        color: #333;
        font-size: 12px !important;
        text-align: right;
        float:right;
        margin-right:10px;
    }

    .z_item li small{
        font-size: 12px;
        color: #999;
    }
    .sele{
        float: right;
        margin-right: 10px;
        margin-top: 10px;
    }
    .button-foot{
        width: 100%;
        background:#9898E7;
    }
    .button-foot .col a{
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
        text-align: center;
    }


    .ios .toolbar a.link {
        height: 44px;
        font-size: 14px;
        color: #999;
    }
    .immediately{
        color: #fff !important;
    }
    .row {
        width: 100%;
        background: white;
    }


    .z_item ul {
        padding-left: 0;
        font: inherit;
        font-size: 100%;
        font-family: '微软雅黑';
        color: #444;
    }
    .z_item li {
        background: white;
        padding-left: 10px;
        border-bottom: 1px solid #f5f5f5;
        line-height: 40px;
        font-weight: bold;
    }
    .z_item .z_item_rt {
        float: right;
        margin-right: 10px;
        color: #ff6c00;
        font-weight: normal;
    }

    .ios .list {
        margin: 20px 0px 0px 0px;
        background: #fff;
    }

    .item-address {
        position: relative;
        border: none;
        padding: 10px 0 8px 50px;
        min-height: 0;
        border-bottom: 1px solid #f5f5f5;
    }

    .item-address h2 {
        color: #333;
        font-size: 14px;
        margin: 0;
    }

    .item-address h5 {
        color: #333;
        font-size: 12px;
        margin: 0;
    }

    .landmark {
        position: absolute;
        border-radius: 0;
        width: 21px;
        height: 30px;
        left: 15px;
        top: 12px;
    }

    .color-gray {
        position: absolute;
        top: 30px;
        color: #8e8e93;
        font-size: 20px;
        right: 10px;
    }

    .ios .navbar {
        font-size: 16px;
    }

    .ios .navbar .right {
        margin-left: 10px;
        color: #fff;
        font-size: 14px;
    }

    .ios .card-header {
        padding: 4px 15px;
        min-height: 55px;
        position: static;
    }

    .text-right {
        text-align: center;
    }

    .infor-face {
        max-width: 24px;
        max-height: 24px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .text-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #999;
        display: inherit;
    }

    .text-left h4 {
        font-size: 14px;
        padding-right: 15px;
        margin-bottom: 0;
        font-weight: bold;
        color: #333;
    }

    .label-v {
        width: 24px;
        height: 14px;
        vertical-align: text-bottom;
        vertical-align: middle;
    }

    .text-left h5 {
        color: #999;
        font-size: 12px;
        padding-right: 15px;
        font-weight: initial;
        margin-top: 3px;
    }

    .line-icon {
        position: absolute;
        left: 16px;
        width: 16px;
        height: 45px;
    }

    .pull-left {
        text-align: left;
        margin-left: 24px;
    }

    .pull-left b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-left span {
        font-size: 12px;
        color: #666;
        display: block;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card-center i {
        font-style: normal;
        color: #333;
        font-size: 12px;
        text-align: center;
        display: inherit;
    }

    .text-orange {
        height: 0px;
        color: #ff6c00;
        font-weight: normal !important;
        font-size: 13px;
        text-align: center;
    }

    .status-bg {
        background: url('../../assets/img/route-bg.png') no-repeat top center;
        background-size: 95px 4px;
        margin-top: 6px;
        padding-top: 10px;
        width: 97px;
    }

    .card-right {
        text-align: center;
    }

    .pull-right {
        text-align: right;
    }

    .pull-right b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #999;
        display: inherit;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ios .block {
        margin: 0;
        padding: 15px 0px 15px 15px;
        background: #fff;
    }

    .classification {
        height: 21px;
        color: #333;
        font-size: 14px;
        margin: 0px;
    }

    .label-icon-trade {
        width: 32px;
        height: 16px;
        margin-right: 18px;
        margin-top: 2px;
        float: left;
    }
    .row-wrap {
        padding: 10px 0px;
        border-bottom: 1px solid #f5f5f5;
    }
    .item-add {
        background: #f8fff0;
        padding: 4px 10px;
        margin: 10px 0px;
        border-left: 1px solid green;
    }

    .item-add span {
        width: 50%;
        color: rgb(51, 140, 37);
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
        display: inline-block;
    }

    .item-fot span i {
        color: #ff6c00;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-style: normal;
        font-weight: initial;
    }

    .item-add h5 {
        margin: 5px 0px;
    }

    .item-fot span {
        font-size: 13px;
        color: #666;
    }

    .ios .block-title {
        margin: 10px 0px 0px 0px;
    }

    .ng-binding {
        margin-right: 10px;
    }

    .bg-white {
        background: #fff;
        padding: 10px 0px;
    }

    .list-inset {
        margin: 0 15px;
    }

    .list-inset .bold {
        margin: 10px 0px;
        color: #000;
    }

    .text-gray {
        margin: 0;
        color: #999;
        font-size: 14px;
    }

    .bold {
        color: #000;
        font-weight: bold;
        font-size: 14px;
    }

    .single_details {
        margin: 20px 0px 0px 0px !important;
        padding: 15px !important;
        border-bottom: 1px solid #f5f5f5;
    }

    .situation {
        float: right;
    }

    .ios .block h2 {
        color: #000;
        font-weight: bold;
        font-size: 14px;
    }

    .text-red {
        font-weight: bold;
        color: #db4226;
        font-size: 14px;
    }

    .list-passdetail {
        position: relative;
        padding: 5px 0 5px 30px;
        background: #fff;
        border-bottom: 1px solid #f5f5f5;
    }

    .orderby-num {
        position: absolute;
        left: 15px;
        top: 20px;
        font-size: 18px !important;
        z-index: 99;
    }

    .infor-img {
        position: absolute;
        left: 50px;
        width: 40px;
        height: 40px;
        vertical-align: text-bottom;
        vertical-align: middle;
        border-radius: 100%;
        background: #f0f0f0;
        top:13px;
    }

    .list-passdetail ul {
        padding: 0;
    }

    .list-passdetail ul li {
        list-style: none;
        padding:5px 15px;
    }

    .list-passdetail ul li span {
        float: right;
    }

    .list-passdetail h2 {
        color: #333;
        font-size: 14px;
        font-weight: initial;
        padding-left: 60px;
    }

    .button-small {
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 2px 4px 1px;
        width: 60px;
        height: 30px !important;
        line-height: 30px !important;
        background: #db4226;
        color: #fff !important;
        border: none !important;
        font-weight: initial !important;
        font-size: 12px !important;
    }
    .card_nav {
        padding: 10px 0px;
        border-radius: 0px !important;
        margin: 0px !important;
    }


</style>
